<template>
    <div class="tree-content">
        <div v-for="(item,index) in tree" :key="index" :class="item.class">
            <div class="title">
				<div class="tag" :data="item.class"></div>
				<a @click="goScroll(item.id)" href="javascript:void(0)">{{ item.text }}</a></div>
            <catalog-item v-if="item.children && item.children.length > 0" :tree="item.children" :title="item.text" :class-data="item.class"></catalog-item>
        </div>
        <!-- <slot>
            <div v-for="(item,index) in tree" :key="index" name="item" :class="item.class">{{ item.text }}</div>
        </slot> -->
    </div>
</template>

<script>
    export default {
        name: 'catalog-item',
        data() {
            return {
            };
        },
        props: {
            tree: {
                type: Array,
                default: () => {
                    return []
                }
            },
            title: {
                type: String,
                default: ''
            },
            classData: {
                type: String,
                default: ''
            }
        },
        mounted() {
            // this.init()
        },
        methods: {
			goScroll(e) {
				let dom = document.getElementById(e)
				let y = dom.offsetTop
				console.log(dom.offsetParent)
				while(e == dom.offsetParent){
					y += dom.offsetTop;
				}
				y -= -50;/*悬浮菜单的高度*/
				window.scrollTo(0,y);
			}
        }
    };
</script>

<style scoped lang="scss">
    .tree-content {
        width: 100%;
        .title {
            font-weight: 600;
            // display: flex;
            // align-items: center;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            cursor: pointer;
			display: flex;
			align-items: center;
        }
		.title:hover {
			background: #f5f5f5;
		}
        .H1 {
            &>.title {
                font-size: 30rem;
                height: 40rem;
                
            } 
        }
        .H2 {
            // border-left: 1px solid #eee;
			margin-top: 10rem;
            &>.title {
                font-size: 22rem;
                height: 36px;
                text-indent: 12rem;
            }
            
        }
        .H3 {
            &>.title {
                font-size: 18.73rem;
                height: 28px;
                text-indent: 16rem;
            }
        }
        .H4 {
			margin-top: 10rem;
            &>.title {
                font-size: 15rem;
                height: 26px;
                text-indent: 28rem;
				a {
					font-weight: 400;
				}
            }
        }
        .H5 {
            &>.title {
                font-size: 13.28rem;
                text-indent: 36rem;
				height: 22px;
				a {
					font-weight: 400;
				}
            }
        }
		a {
			color: #333;
			display: block;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.tag {
			width: 10rem;
			height: 10rem;
			border-radius: 50%;
			background: #000;
			margin-left: 10px;
		}
		.tag[data = 'H1'] {
			display: none;
		}
		.tag[data = 'H2'] {
			width: 10px;
			height: 10px;
			min-width: 10px;
			background: #333;
		}
		.tag[data = 'H3'] {
			width: 8px;
			height: 8px;
			min-width: 8px;
			background: #666;
		}
		.tag[data = 'H4'] {
			width: 6px;
			min-width: 6px;
			height: 6px;
			margin-left: 20px;
			background: #999;
		}
		.tag[data = 'H5'] {
			width: 4px;
			height: 4px;
			min-width: 4px;
			background: #aaa
		}
    }
</style>
